<template>
  <div class="leaveDiv">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>请假情况</span>
          </div>
          <div class="chart-container">
            <div class="chart" ref="answerPieChart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>请假人数</span>
          </div>
          <div class="chart-container">
            <div class="chart" ref="numberOfAbsences"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 新增请假具体人员列表（自定义样式） -->
    <el-card class="chart-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>请假具体人员</span>
      </div>
      <div class="absence-list">
        <div class="list-header">
          <div class="header-cell name">姓名</div>
          <div class="header-cell class">班级</div>
          <div class="header-cell reason">缺勤原因</div>
          <div class="header-cell time">缺勤时间</div>
        </div>
        <div class="list-body">
          <div v-if="absenceList.length === 0" class="no-data">
            <p>暂无缺勤记录</p>
          </div>
          <div v-else class="list-content">
            <div v-for="(item, index) in absenceList" :key="index" class="list-row">
              <div class="cell name">{{ item.name }}</div>
              <div class="cell class">{{ item.classes }}</div>
              <div class="cell reason">{{ item.absence_reason }}</div>
              <div class="cell time">{{ item.absence_time }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "Leave",
  data() {
    return {
      leavePieData: [], // 饼状图数据
      barCategories: [], // 柱状图横坐标（请假原因）
      barSeries: [], // 柱状图 series
      absenceList: [] // 新增：请假具体人员列表
    };
  },
  mounted() {
    this.fetchLeaveInfo();
    this.fetchAbsenceList(); // 新增：获取请假具体人员
  },
  methods: {
    async fetchLeaveInfo() {
      try {
        const response = await this.$overviewapi.getLeave();
        const raw = response.data || [];
        // 统计饼状图数据
        const groupMap = { '1': 0, '2': 0, '3': 0 };
        const reasonSet = new Set();
        // reason -> group -> count
        const reasonGroupCount = {};
        raw.forEach(item => {
          const group = String(item.groupName);
          const reason = item.reason;
          const count = Number(item.countLeave) || 0;
          groupMap[group] = (groupMap[group] || 0) + count;
          reasonSet.add(reason);
          if (!reasonGroupCount[reason]) reasonGroupCount[reason] = { '1': 0, '2': 0, '3': 0 };
          reasonGroupCount[reason][group] = count;
        });
        // 饼状图数据
        this.leavePieData = [
          { value: groupMap['1'], name: '1组' },
          { value: groupMap['2'], name: '2组' },
          { value: groupMap['3'], name: '3组' }
        ];
        // 柱状图横坐标
        this.barCategories = Array.from(reasonSet);
        // 柱状图 series
        this.barSeries = ['1', '2', '3'].map(group => ({
          name: group + '组',
          type: 'bar',
          data: this.barCategories.map(reason => reasonGroupCount[reason][group] || 0)
        }));
        // 初始化图表
        this.$nextTick(() => {
          this.initAnswerPieChart();
          this.initLibraryBarChart();
        });
      } catch (error) {
        console.error('获取请假信息出错:', error);
      }
    },
    // 新增：获取请假具体人员（全量）
    async fetchAbsenceList() {
      this.absenceList = [];
      let pageNum = 1;
      const pageSize = 1;
      let hasMore = true;
      while (hasMore) {
        try {
          const response = await this.$displayapi.getAbsence({ pageNum, pageSize });
          if (response && response.data && Array.isArray(response.data) && response.data.length > 0) {
            this.absenceList.push(...response.data);
            pageNum++;
          } else {
            hasMore = false;
          }
        } catch (error) {
          console.error('获取请假具体人员出错:', error);
          hasMore = false;
        }
      }
    },
    initAnswerPieChart() {
      const chartDom = this.$refs.answerPieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          left: "center",
          textStyle: {
            color: "#68d8fe",
            fontWeight: "bold",
          },
        },
        tooltip: { trigger: "item" },
        legend: {
          orient: "horizontal",
          left: "center",
          bottom: "5%",
          textStyle: { color: "#68d8fe", fontWeight: "bold" },
        },
        series: [
          {
            name: "请假人数占比",
            type: "pie",
            radius: "70%",
            center: ["50%", "40%"],
            data: this.leavePieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: { show: false },
            labelLine: { show: false },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize(); });
    },
    initLibraryBarChart() {
      const chartDom = this.$refs.numberOfAbsences;
      const myChart = echarts.init(chartDom);
      const option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          top: "5%",
          containLabel: true,
        },
        legend: {
          orient: "horizontal",
          left: "center",
          bottom: "1%",
          textStyle: { color: "#68d8fe", fontWeight: "bold" },
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.barCategories,
          axisLabel: { color: "#68d8fe", fontWeight: "bold", rotate: 45 },
        },
        yAxis: {
          axisLabel: { color: "#68d8fe", fontWeight: "bold" },
        },
        series: this.barSeries
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize(); });
    },
  },
};
</script>
<style lang="scss" scoped>
.leaveDiv {
  width: 100%;
  height: 100%;
  //background-color: #fff;
  .clearfix {
    font-size: 22px;
    font-weight: bold;
    color: #68d8fe;
  }
  .chart-container {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .chart {
    height: 300px;
  }
  .chart-card {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    background-color: rgba(104, 216, 254, 0.1) !important;
    border: 1px solid rgba(104, 216, 254, 0.5) !important;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 10px 10px 10px;
    /* 防止卡片边界超出页面 */
    max-width: 100%;
    overflow-x: auto;
  }

  .chart-card >>> .el-card__header {
    background-color: rgba(104, 216, 254, 0.2);
    border-bottom: 1px solid rgba(104, 216, 254, 0.5);
    color: #68d8fe;
    font-weight: bold;
  }

  .chart-card >>> .el-card__body {
    background-color: transparent;
  }

  // 新增：美化el-table样式
  .chart-card >>> .el-table {
    background: rgba(19, 25, 47, 0.8);
    border-radius: 8px;
    color: #d3d6dd;
    font-size: 16px;
  }
  .chart-card >>> .el-table th {
    background: rgba(104, 216, 254, 0.2);
    color: #68d8fe;
    font-weight: bold;
    border-bottom: 1px solid rgba(104, 216, 254, 0.5);
  }
  .chart-card >>> .el-table td {
    background: transparent;
    color: #d3d6dd;
    border-bottom: 1px solid rgba(104, 216, 254, 0.1);
  }
  .chart-card >>> .el-table tr {
    transition: background 0.2s;
  }
  .chart-card >>> .el-table tr:hover > td {
    background: rgba(104, 216, 254, 0.08);
  }
  .chart-card >>> .el-table__body-wrapper {
    border-radius: 8px;
    overflow: hidden;
  }
}

.absence-list {
  background-color: rgba(19, 25, 47, 0.5);
  border: 1px solid rgba(104, 216, 254, 0.5);
  border-radius: 8px;
  padding: 1px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  max-height: 320px; /* 4条数据，每条约70-80px，含表头 */
  overflow-y: auto;

  .list-header {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid rgba(104, 216, 254, 0.3);
    margin-bottom: 10px;

    .header-cell {
      flex: 1;
      text-align: center;
      color: #68d8fe;
      font-weight: bold;
      font-size: 18px;

      &.name { flex: 0.7; }
      &.class { flex: 0.7; }
      &.reason { flex: 1.2; }
      &.time { flex: 1; }
    }
  }

  .list-body {
    flex: 1;
    overflow: hidden;
    position: relative;

    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: #d3d6dd;
    }

    .list-content {
      max-height: 260px; /* 除去表头，4条数据 */
      overflow-y: auto;
      .list-row {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid rgba(104, 216, 254, 0.1);
        transition: background-color 0.3s;

        &:hover {
          background-color: rgba(104, 216, 254, 0.05);
        }

        .cell {
          flex: 1;
          text-align: center;
          color: #d3d6dd;
          font-size: 18px;
          padding: 0 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &.name { flex: 0.7; }
          &.class { flex: 0.7; }
          &.reason { flex: 1.2; }
          &.time { flex: 1; }
        }
      }
    }
  }
}

.absence-list,
.absence-list .list-content {
  scrollbar-width: thin;
  scrollbar-color: #68d8fe rgba(19,25,47,0.3);
}
.absence-list::-webkit-scrollbar,
.absence-list .list-content::-webkit-scrollbar {
  width: 8px;
  background: rgba(19,25,47,0.3);
  border-radius: 8px;
}
.absence-list::-webkit-scrollbar-thumb,
.absence-list .list-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
  border-radius: 8px;
}
.absence-list::-webkit-scrollbar-track,
.absence-list .list-content::-webkit-scrollbar-track {
  background: rgba(19,25,47,0.3);
  border-radius: 8px;
}
</style>
